<template>
	<view class="content" style="background-color: #f5f5f5;">
		<u-navbar scrollable=false titleStyle="font-size:40rpx;color:#333" :placeholder='true' title="品牌特卖"
			:autoBack="true">
		</u-navbar>
		<view class="top" v-if="swiperList.length>0">
			<view class="u-demo-block">
				<u-swiper :list="swiperList" indicatorMode='dot' :indicator='true'  keyName='image'>
				</u-swiper>
			</view>
		</view>
		<view class="container">
			<view class="center" style="margin: 32rpx 0;">
				— 热门品牌 精挑细选 —
			</view>
			<view class="card" v-for="(item,index) in list" :key="index"
				style="margin-bottom: 16rpx;background-color: white;padding-bottom: 16rpx;border-radius: 21rpx;">
				<image style="width: 100%" :src="item.image" mode="widthFix"></image>
				<view class="fontS28 co3" style="margin:0 16rpx;display: block;">{{item.product_name}}</view>
				<view class="flexJBC" style="margin:0 16rpx;">
					<view class="fontS32 homeRed">￥{{item.price}} <text class="fontS24 co9" style="text-decoration:line-through; margin-left: 20rpx;">市场价：￥{{item.ot_price}}</text> </view>
					<view class="cof center fontS24"   @click="$my.go('/myPackageA/goodsAndFacton/goodsDetails?id='+item.id)"
						style="line-height: 44rpx;border-radius: 22rpx; background-color: #dd2131; width: 160rpx; height: 44rpx;">
						查看详情
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				swiperList: [],
				list: [],
				page: 1,
				id: 0,
			}
		},
		onReachBottom() {
			this.page++;
			this.getList()
		},
		onLoad(option) {
			this.id = option.id
			this.getList()
			this.getLunbo();
		},
		methods: {
			getList() {
				this.$my.post('/index/Product/getPlatformTypeProductBrand', {
					page: this.page,
					limit: 10,
					platform_type_id: this.id,
					category_id: 0
				}).then(res => {
					if (res.code == 200 && res.data.data.length > 0) {
						this.list = this.list.concat(res.data.data)
					}
				})
			},
			getLunbo() {
				// 轮播图
				this.$my.post('/index/com/getAd', {
					type: 0,
					type_id: this.id
				}).then(res => {
					if (res.code == 200) {
						this.swiperList = res.data
					}
				})

			}
		}
	}
</script>

<style lang="less" scoped>
	.content {

		.container {
			.card {
				margin: 0 4%;
				overflow: hidden;
			}
		}

	}
</style>
